.app-footer {
    .container {
      padding-bottom: 4em;

      @media screen and (min-width: $tablet) {
        padding-top: 5em;
        padding-bottom: 5em;
        @include flexbox();
        @include justify-content(space-between);
      }
    }

    &:before {
      content: "";
      display: block;
      width: 100%;
      height: 1.5px;
    }
  }

  .app-footer_wrap-logo {
    width: 50%;
    margin-top: 2em;

    @media screen and (min-width: $tablet) {
      margin-top: 0;
      max-width: 13em;
      @include order(-1);
    }

    // only IE
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      margin-right: 3em;
    }
  }

  .app-footer_logo {
    display: none;

    @media screen and (min-width: $tablet) {
      @include flexbox();
      margin-bottom: 3em;
      @include flex(1);
    }

    img {
      width: 7.5em;
    }
  }

  .app-footer_github {
    display: inline-block;
    border-radius: 2px;
    width: 48%;
    text-align: center;
    font-size: 0.8em;
    line-height: 3.4;
    transition: all 0.3s ease;

    img {
      display: inline-block;
      position: relative;
      top: 0.2em;
      margin-right: 0.5em;
      transition: all 0.3s ease;
    }

    &:hover {
      img {
        opacity: 0.7;
      }
    }
  }

  .app-footer_github-link {
    display: inline-flex;
    width: 100%;
    margin-top: 1em;
    transition: all 0.3s ease;

    img {
      display: inline-block;
      position: relative;
      top: 0.17em;
      margin-right: 0.5em;
      transition: all 0.3s ease;
    }

    &:hover {
      img {
        opacity: 0.7;
      }
    }
  }

  .app-footer_col {
    // only IE
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      width: 20%;
    }

    &:after {
      content: "";
      display: block;
      width: 100%;
      height: 1.5px;

      @media screen and (min-width: $tablet) {
        display: none;
      }
    }
  }

  .app-footer_pre-menu {
    font-size: 0.8em;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    display: block;
    padding: 1.7em 0;
    position: relative;

    &:after {
      content: "+";
      display: block;
      color: $brand;
      font-size: 1.7em;
      font-weight: 300;
      line-height: 0.4;
      position: absolute;
      right: 1em;
      top: 0.95em;
      height: 0.6em;
      width: 0.6em;
      transition: all 0.3s ease;
      transform-origin: 50%;
    }

    @media screen and (min-width: $tablet) {
      margin-bottom: 1.3em;
      padding: 0;
      line-height: 1.6;

      &:after {
        display: none;
      }
    }
  }

  .app-footer_nav {
    max-height: 0;
    transition: all 0.3s ease;
    overflow: hidden;
    padding-left: 1.5em;

    @media screen and (min-width: $tablet) {
      padding-left: 0;
      max-height: 100%;
    }

    a {
      margin-bottom: 0.5em;
      line-height: 2;
      font-weight: 500;
      transition: all 0.3s ease;

      @media screen and (min-width: $tablet) {
        line-height: 1.7;
      }
    }

    @media screen and (min-width: $tablet) {
      + .app-footer_nav {
        margin-top: 2em;
      }
    }
  }

  .app-footer_col input {
    display: none;
  }

  input:checked + .app-footer_pre-menu + .app-footer_nav,
  input:checked + .app-footer_pre-menu + .app-footer_nav + .app-footer_nav {
    max-height: 50vh;
    padding-top: 0.5em;
    padding-bottom: 1.5em;
  }

  input:checked + .app-footer_pre-menu:after {
    transform: rotate(135deg);
    top: 0.9em;
  }

  .app-footer_install {
    @include flexbox();
    transition: color 0.3s ease;

    span {
      display: inline-block;
      width: 2em;
    }

    img {
      margin-top: 0.2em;
      margin-right: 0.5em;
    }
  }

  // Dark version
  .app-footer--black {
    background: $space;

    .app-footer_col:after,
    &:before {
      background-image: linear-gradient(
        -90deg,
        #030c1a 0%,
        #121f33 28%,
        #121f33 74%,
        #030c1a 100%
      );
    }

    .app-footer_github-link {
      color: #fff;

      &:hover {
        color: $grey-light;
      }
    }

    .app-footer_github {
      color: #fff;
      background: $space-grey;

      &:hover {
        color: $grey-light;
      }
    }

    .app-footer_pre-menu {
      color: $grey-light;
    }

    .app-footer_nav a {
      color: #fff;

      &:hover {
        color: $grey-light;
      }
    }
  }

  // Light version
  .app-footer--light {
    .app-footer_col:after,
    &:before {
      background-image: linear-gradient(
        -90deg,
        #ffffff 0%,
        #e7ebf2 26%,
        #e7ebf2 74%,
        #ffffff 100%
      );
    }

    .app-footer_github-link {
      color: $space;

      &:hover {
        color: $grey-dark;
      }
    }

    .app-footer_github {
      color: $space;
      background: $grey-smoke;

      &:hover {
        color: $grey-dark;
      }
    }

    .app-footer_pre-menu {
      color: $grey-light;
    }

    .app-footer_nav a {
      color: $space;

      &:hover {
        color: $grey-dark;
      }
    }
  }

  .app-footer_partner {
    margin: 3em auto;
    width: 6em;
  }